<template>
  <div class="myActivity">
    <Vheader :header="header"></Vheader>
    <ul class="myActivityUl">
      <template>
        <li class="activity" :key="template.name">
          <div class="activityImg"><img :src="template.backgroundImgPath" /></div>
          <div class="actContent">
            <div class="twoCodeImg"><img :src="imgQRCode"></div>
            <span class="tryToPlay">扫码试玩</span>
          </div>
        </li>
      </template>
        <div class="useSteps">
          <div class="detailsTitle">
            <img class="detailsTitleImg" src="static/imgs/myActivityImg/details_process.png">
            <div class="textTitleCss">
              <span>使用流程</span>
            </div>
          </div>
          <div class="useStepsContent">
            <div class="step1">
              <img class="stepsImg" src="static/imgs/myActivityImg/details_liucheng-1.png">
              <label class="textCss">1.创建活动</label>
            </div>
            <div class="arrow"><img class="arrowImg" src="static/imgs/myActivityImg/details_arrow.png"></div>
            <div class="step2">
              <img class="stepsImg" src="static/imgs/myActivityImg/details_liucheng-2.png">
              <label class="textCss">2.获取活动二维码/链接</label>
            </div>
            <div class="arrow"><img class="arrowImg" src="static/imgs/myActivityImg/details_arrow.png"></div>
            <div class="step3">
              <img class="stepsImg" src="static/imgs/myActivityImg/details_liucheng-3.png">
              <label class="textCss">3.将二维码复制到活动文案</label>
            </div>
            <div class="arrow"><img class="arrowImg" src="static/imgs/myActivityImg/details_arrow.png"></div>
            <div class="step4">
              <img class="stepsImg" src="static/imgs/myActivityImg/details_liucheng-4.png">
              <label class="textCss">4.设置微信自动回复</label>
            </div>
          </div>
          <div class="btnCss">
            <button class="createActivity" @click="createActivity()">创建活动</button>
            <button class="userDefined" @click="userDefined()">我要自定义活动</button>
          </div>
        </div>
    </ul>
    <Vfooter></Vfooter>
    <!--创建活动，自定义活动dialog-->
    <Vdialog
      :visible="dialogVisible"
      :closeDialog="handleClose">
      <!-- 创建活动 -->
      <div slot="modal-body" class="dialogBody" v-show="createActivityVisible">
        <div class="payDialog">
          <div class="payTitle"><span>请选择支付方式</span></div>
          <div class="payImg">
            <div class="payTreasure">
              <img class="payTreasureImg" src="/static/imgs/myActivityImg/details_PayTreasure.png">
              <input class="radioCss" type="radio" name="way" value="0" v-model="payTreasure.picked">
            </div>
            <div class="weChat">
              <img class="weChatImg" src="/static/imgs/myActivityImg/details_wechat.png">
              <input class="radioCss" type="radio" name="way" value="1" v-model="payTreasure.picked">
            </div>
          </div>
          <div class="sumCss">
            <label class="sum">金额：</label>
            <input class="getNumber" type="number" name="money" v-model="payTreasure.sum">
            <label class="sum">元</label>
          </div>
          <div class="radio">
            <div class="radio1">
              <label for="3">3天</label>
              <div class="inputCss">
                <input class="radioCss" type="radio" name="days" value="3" v-model="payTreasure.checked">
              </div>
            </div>
            <div class="radio2">
              <label for="7">7天</label>
              <div class="inputCss">
                <input class="radioCss" type="radio" name="days" value="7" v-model="payTreasure.checked">
              </div>
            </div>
            <div class="radio3">
              <label for="30">30天</label>
              <div class="inputCss">
                <input class="radioCss" type="radio" name="days" value="30" v-model="payTreasure.checked">
              </div>
            </div>
          </div>
          <div class="btnDialogCss">
            <button class="btn1" @click="OneDay(template.id)">免费试用一天</button>
            <button class="btn2" @click="buy(template.id)">购买</button>
            <button class="btn3" @click="handleClose()">取消</button>
          </div>
        </div>
      </div>
      <!--自定义活动-->
      <div slot="modal-body" class="dialogBody" v-show="userDefinedVisible">
        <div class="userDefinedDialog">
          <div class="userTitle"><span>请输入您的联系方式</span></div>
          <div class="userTelephone">
            <label>手机号：</label>
            <input type="number" name="telephone" v-model="user.telephoneNum">
          </div>
          <div class="userName">
            <label>姓  名：</label>
            <input type="text" name="userName" v-model="user.name">
          </div>
          <div class="btn">
            <button class="confirm" @click="confirm()">确认</button>
            <button class="cancel" @click="handleClose()">取消</button>
          </div>
          <label class="tips">我们会与您取得联系</label>
        </div>
      </div>
    </Vdialog>
  </div>
</template>

<script>
/*eslint-disable*/
import Vheader from './common/Vheader'
import Vfooter from './common/Vfooter'
import Vdialog from './common/Vdialog'
import { loginAction, registerAction, forgetPasswordAction, getHomeTemplateAction } from '../axios/api/homePage_api'
import { buyAction, buyConfirm, generateQRCodeAction, getQRCodeAction, getTemplateAction, } from  '../axios/api/myTemplate_api'

export default {
  name: 'myTemplate',
  data () {
    return {
      header: {
        templateAction: this.templateAction,
        template: '返回首页'
      },
      template: [
        { backgroundImgPath: '',
          description: '',
          id: '',
          name: '',
          serveUrl: '',
          state: '',
          title: '',
          type: '',
          username: ''}
      ],
      dialogVisible:false,
      createActivityVisible:false,
      userDefinedVisible:false,
      payTreasure: {
        picked:'0',
        sum:'',
        checked:'7',
      },
      user: {
        telephoneNum:'',
        name:'',
      },
      //生成二维码对象
      generateQRCode: {
        templateName:'',
        callback:'http://www.wxahd.com/isActivityStart',
      },
      imgQRCode:'',
      createActivitySure:{
        name:'',
        templateName:'',
      }
    }
  },
  components: {
    Vheader,
    Vfooter,
    Vdialog
  },
  created () {
    this.getTemplate()
  },
  updated () {
    window.scroll(0, 0)
  },
  methods: {
    // 点击创建活动函数
    createActivity (id) {
      this.dialogVisible = true;
      this.createActivityVisible = true;
      this.userDefinedVisible = false;
    },
    // 关闭dialog
    handleClose () {
      this.dialogVisible = false;
    },
    //点击用户自定义函数
    userDefined(){
      this.dialogVisible = true;
      this.createActivityVisible = false;
      this.userDefinedVisible = true;
    },
    //免费使用一天
    OneDay(id){
      this.$router.push({name: 'myActivity', params: {templateName: this.templateName, name: this.name}})
    },
    //购买---创建活动
    async buy(id){
      let { data } = await buyAction({'templateId':id}) //创建活动成功或失败提示
      this.$router.push({name: 'myActivity'})
      if(data.code = 1){
        this.$router.push({name: 'myActivity'})
      }else{
        alert("创建活动失败")
        this.$router.push({name: 'myActivity'})
      }
    },
    //自定义活动确认
    async confirm(){
      let data = await confirmAction(this.user)
    },
    //获取二维码
    async getQRCode (id) {
      let data = await getQRCodeAction({'templateId':id})
      this.imgQRCode = data.request.responseURL
    },
    //返回首页
    templateAction(){
      this.$router.push({name: 'homePage'})
    },
    //根据模板名称获取模板
    async getTemplate(){
      let id = this.$route.query.templateId
      let { data } = await getTemplateAction({'templateId':id})
      this.template = data.template
      let bgImgName = data.template.backgroundImgPath
      this.template.backgroundImgPath = '/littlefinger/storage/images/' + bgImgName
      this.getQRCode(id)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.myActivity{
  min-width: 1000px;
  overflow: hidden;
  background-color: #e9e9e7;
  font-family: 'SimSun';
}
.myActivity .myActivityUl{
  margin: 0px 74px;
  justify-content: center;
}
.activity{
  width: 100%;
  flex-direction: row;
  flex-wrap:nowrap;
  box-shadow: 4px 4px 13px #666;
  margin-top: 26px;
  display: flex;
  justify-content: flex-start;
  height: 380px;
  background-color: #fff;
}
.activityImg{
  width: 100%;
  height: 380px;
  padding: 10px;
}
.activityImg img{
  width: 100%;
  height: 360px;
  z-index: -1;
}
.actContent{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height: 381px;
  width: 100%;
  min-width: 600px;
  margin-right: 200px;
}
/*试玩二维码样式*/
.twoCodeImg{
  display: inline-block;
  width: 226px;
  height: 226px;
  background-color: white;
  opacity: 0.4;
  margin-right: 200px;
  margin-top: 50px;
  justify-content: center;
}
.twoCodeImg img{
  background-color: #fff;
  padding-top: 13px;
}
.tryToPlay{
  color: #fff;
  font-family: 'SimSun';
  font-size: 24px;
  margin-right: 270px;
  margin-top: 25px;
}
/*使用流程样式*/
.useSteps{
  width: 100%;
  min-width: 600px;
  flex-direction: row;
  flex-wrap:nowrap;
  box-shadow: 4px 4px 13px #666;
  margin-top: 26px;
  display: flex;
  height: 500px;
  background-color: #fff;
  align-items: center;
  position: relative;
}
.useStepsContent{
  margin-left: -269px;
  display: inline-flex;
  width: 100%;
  height: 250px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  position: relative;
  margin-bottom: -50px;
}
  .detailsTitle{
    width: 269px;
    height: 72px;
    display: flex;
    flex-direction: column;
    margin-top: -430px;
  }
  .textTitleCss{
    display: inline-block;
    color: #000;
    font-size: 24px;
    margin-top: -55px;
  }
  .step1{
    margin-left: 148px;
  }
  .step4{
    margin-right: 148px;
  }
  .stepsImg{
    width: 100%;
  }
  .arrow{
    margin: 25px 25px 25px 25px;
  }
  .arrowImg{
    width: 30px;
    height: 30px;
  }
  .textCss{
    display: inline-block;
    color: #000;
    font-size: 16px;
    margin-bottom: -50px;
  }
/*活动创建按钮样式*/
.btnCss{
  display: inline-flex;
  flex-direction: row;
  margin-bottom:-400px;
  margin-left: -500px ;
}
  .createActivity{
    width: 221px;
    height: 46px;
    color: #fff;
    background-color: #47cb69;
    font-size: 24px;
    margin-right: 23px;
    border: 1px solid #47cb69;
    border-radius: 3px;
    font-family: 'SimSun';
  }
  .createActivity:hover{
    background-color: #50e476;
  }
  .userDefined{
    width: 221px;
    height: 46px;
    color: #2fbd53;
    background-color: transparent;
    font-size: 24px;
    margin-right: 18px;
    border: 1px solid #47cb69;
    border-radius: 3px;
    font-family: 'SimSun';
  }
  .userDefined:hover{
    color: #fff;
    background-color: #50e476;
  }
  /*支付框样式*/
.payDialog{
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 600px;
  height: 500px;
  background: url('/static/imgs/myActivityImg/details_buy.png') no-repeat;
}
  .payTitle{
    position: absolute;
    display: inline-block;
    font-size: 24px;
    color: #fefefe;
    margin-top: -220px;
    margin-left: 220px;
  }
  .payImg{
    position: absolute;
    display: inline-block;
    flex-direction: row;
    margin-top: -120px;
  }
  .payTreasure{
    width: 212px;
    height: 107px;
    margin-left: 80px;
  }
  .weChat{
    width: 212px;
    height: 107px;
    margin-left: 338px;
    margin-top: -107px;
  }
  .sumCss{
    margin-top: 200px;
  }
  /*单选框样式*/
  .sum{
    font-size: 24px;
    color: #000;
  }
  .getNumber{
    display: inline-block;
    width: 194px;
    height: 50px;
    background-color: rgb(233,233,231);
    border-radius: 3px;
    margin-right: 5px;
    font-size: 18px;
    cursor: pointer;
    align-items: center;
    text-align: center;
  }
  .radio{
    display: flex;
    position: relative;
    justify-content: space-around;
    flex-direction: row;
    font-size: 24px;
    padding-top: 50px;
  }
    .radio1 .radio2 .radio3 {
      display: inline-block;
      width: 82px;
      height: 62px;
    }
    .inputCss{
      margin-left: 20px;
    }
    .radioCss{
      width: 20px;
      height: 0px;
      background-color: #000;
      margin-right: 30px;
      border-radius: 50%;
      position: relative;
    }
    .radioCss:before,.radioCss:after{
      content: '';
      display: block;
      position: absolute;
      border-radius: 50%;
      transition: .3s ease;
    }
    .radioCss:before{
      top: 0px;
      left: 0px;
      width: 18px;
      height: 18px;
      background-color: #fff;
      border: 1px solid #000;
    }
    .radioCss:after{
      top: 6px;
      left: 6px;
      width: 8px;
      height: 8px;
      background-color: #fff;
    }
    .radioCss:checked:after{
      top: 4px;
      left: 4px;
      width: 12px;
      height: 12px;
      background-color:#000;
    }
    .radioCss:checked:before{
      border-color: #000;
    }
  .btnDialogCss{
    position: relative;
    margin-top: 70px;
  }
    .btn1{
      width: 180px;
      height: 40px;
      color: #47cb69;
      font-size: 24px;
      border:1px solid #47cb69;
      border-radius: 3px;
      background-color: transparent;
      float: left;
      margin-left: 10px;
      font-family: 'SimSun';
    }
    .btn1 .btn3:hover{
      color: #fff;
      background-color: #50e476;
    }
    .btn2{
      width: 180px;
      height: 40px;
      color: #fff;
      font-size: 24px;
      border:1px solid #47cb69;
      border-radius: 3px;
      background-color: #47cb69;
      font-family: 'SimSun';
    }
    .btn2:hover{
      background-color: #50e476;
    }
    .btn3{
      width: 180px;
      height: 40px;
      color: #47cb69;
      font-size: 24px;
      border:1px solid #47cb69;
      border-radius: 3px;
      background-color: transparent;
      float: right;
      margin-right: 10px;
      font-family: 'SimSun';
    }
/*用户自定义弹窗样式*/
.userDefinedDialog{
  /*position: absolute;*/
  width: 500px;
  height: 450px;
  display: flex;
  flex-direction: column;
  background: url('/static/imgs/myActivityImg/details_custom.png') no-repeat;
}
.userTitle{
  position: relative;
  font-size: 24px;
  font-family: 'SimSun';
  color: #fff;
  margin-top: 8px;
}
.userTelephone {
  position: relative;
  color: #a7a7a7;
  font-size: 20px;
  font-family: 'SimSun';
  margin-top: 50px;
}
.userTelephone input{
  width: 316px;
  height: 39px;
  background-color: #e9e9e7;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.userName{
  position: relative;
  color: #a7a7a7;
  font-size: 20px;
  font-family: 'SimSun';
  margin-top: 50px;
}
.userName input{
  width: 316px;
  height: 39px;
  background-color: #e9e9e7;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.btn{
  margin-top: 62px;
}
  .confirm{
    width: 205px;
    height: 40px;
    color: #fff;
    background-color: #47cb69;
    border: 1px solid #47cb69;
    border-radius: 3px;
    font-size: 24px;
    font-family: 'SimSun';
  }
  .confirm:hover{
    background-color: #50e476;
  }
  .cancel{
    width: 205px;
    height: 40px;
    color: #47cb69;
    background-color: transparent;
    border: 1px solid #47cb69;
    border-radius: 3px;
    font-size: 24px;
    margin-left: 22px;
    font-family: 'SimSun';
  }
  .cancel:hover{
    color: #fff;
    background-color: #50e476;
  }
  .tips{
    margin-top: 42px;
    font-size: 24px;
    color: #6b8a73;
  }
</style>
